<template>
	<view>
		<!-- 注意子组件传入的值需要@tabTap监听事件 -->
		<view class="white-bj">
			<swiper-tab-hear :tabBars="tabBars" :tabIndex="tabIndex" @tabTap="tabTap" scrollWidth="width:20%"></swiper-tab-hear>
		</view>
		<view class="uni-tab-bar" :style="{height:swiperHeight+'px'}" >
			<scroll-view class="list" scroll-y @scrolltolower="loadMore(index)">
				<template v-if="list.length>0">
					<!-- 列表渲染 -->
					<view class="wid-100 shop white-bj pad-t-40  pad-b-40 pad-l-30 pad-r-30 mar-top20 box-sizing" v-for="(item,index) in list" :key="index">
						<view class="a-center j-sp">
							<view class="a-center">
								<view class="logo overflow-hidden border-r-5"><image :src="item.list.business_logo" mode="widthFix" lazy-load></image></view>
								<view class="font-28 mar-left10">{{item.list.business_name}}</view>
							</view>
							<view class="font-26">
								<view class="activeColor" v-if="item.list.status==0">待支付({{item.list.paytype}})</view>
								<view class="main-zt" v-else-if="item.list.status==1">已支付({{item.list.paytype}})</view>
								<view class="white-zt" v-else-if="item.list.status==2">申请退款({{item.list.paytype}})</view>
								<view class="yellow" v-else-if="item.list.status==3">已驳回({{item.list.paytype}})</view>
								<view class="brown" v-else-if="item.list.status==4">已退款</view>
								<view class="black60-zt" v-else-if="item.list.status==5">关闭</view>
								<view class="yellow" v-else-if="item.list.status==6">已激活</view>
								<view class="brown" v-else-if="item.list.status==7">已赠送</view>
								<view class="black60-zt" v-else-if="item.list.status==8">服务已完结</view>
							</view>
						</view>
						<view class="d-flex mar-top40">
							<view class="left border-r-10 overflow-hidden"><image :src="item.pro_list[0].pic" mode="widthFix" lazy-load></image></view>
							<view class="right mar-left30">
								<view class="font-26 font-w-b text-overflow">{{item.pro_list[0].name}}</view>
								<view class="font-24 black60-zt mar-top20">规格：{{item.pro_list[0].ggname}}</view>
								<view class="a-center j-sp mar-top20">
									<view class="a-end">
										<view class="main-zt font-24 font-w-b">¥<text class="font-34">{{item.pro_list[0].product_price}}</text></view>
									</view>
									<view class="font-34 black40-zt">
										<text>x</text>
										<text class="mar-left5">{{item.list.num}}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="mar-top20 text-right border-t-1-91 pad-t-20">
							<view class="font-w-b font-26">
								实际支付：<text class="font-24 main-zt">¥</text><text class="font-32 main-zt">{{item.list.totalprice}}</text>
							</view>
						</view>
						<view class="a-center j-r font-24 line-h35 flex-wrap">
							<view class="jdhong-bj border-r pad-l-30 pad-r-30 pad-t-10 pad-b-10 white-zt mar-right15 mar-top20" v-if="item.list.status==0" @tap="pay(item.list)">支付</view><!-- 支付 -->
							<view class="main-bj border-r pad-l-30 pad-r-30 pad-t-10 pad-b-10 white-zt mar-right15 mar-top20" @tap="openShow(item.list)">查看详情</view><!-- 查看详情 -->
							<view class="jdhong-bj border-r pad-l-30 pad-r-30 pad-t-10 pad-b-10 white-zt mar-right15 mar-top20" v-if="item.list.status==1" @tap="openTan('jihuo',item)">激活套餐</view><!-- 激活套餐 -->
							<!-- <view class="chengse-bj border-r pad-l-30 pad-r-30 pad-t-10 pad-b-10 white-zt mar-right15 mar-top20" v-if="item.list.status==1"  @tap="openTan('zengsong',item)">赠送套餐</view> --><!-- 赠送套餐 -->
							<view class="black50-bj border-r pad-l-30 pad-r-30 pad-t-10 pad-b-10 white-zt mar-right15 mar-top20" v-if="item.list.status==0" @tap="cancel(item.list)">取消</view><!-- 取消 -->
							<view  class="border-2 border-r pad-l-30 pad-r-30 pad-t-10 pad-b-10 main-zt mar-right15 mar-top20"  v-if="item.list.status==1||item.status>=4" @tap="del(item.list)">删除</view><!-- 删除 -->
						</view>
					</view>
						<!-- 上拉加载 -->
						<load-more :loadText="loadText"></load-more>
				</template>
				<template v-else>
					<!-- 无内容显示 -->
					<view class="nothing d-a-j">
						<image src="../../static/empty.png" mode="widthFix"></image>
						<view class="font-26 black60-zt text-center">没有更多记录...</view>
					</view>
				</template>
			</scroll-view>
		</view>
		<!-- 弹窗 -->
		<view class="position-fixed p-bottom p-left p-right p-top black100-50" v-if="showLoding" @tap="close"></view>
		<view class="wid-100  white-bj fuwu-foot position-fixed p-bottom box-sizing" :style="{height:heightFoot+'px'}" v-if="showLoding">
			<view class="position-relative">
				<view class="text-center">{{footTitle}}</view>
				<view class="icon iconfont icon-guanbi2 position-absolute p-right p-top" @tap="close"></view>
			</view>
			<!-- 套餐 -->
			<view class="mar-top50 coupon-foot">
				<view class="coupon-item a-center j-sp pad-t-30 pad-b-30 box-sizing" v-for="(item,index) in taoList"  :key="index">
					<view class="left">
						<view class="main-zt font-28 font-w-b">{{item.name}}</view>
						<view class="font-24 black60-zt mar-top15">{{item.ggname}}</view>
					</view>
					<view class="right mar-left20">
						<view class="a-center">
							<view class="font-24 main-bj border-r-10 line-h40 pad-l-20 pad-r-20 box-sizing d-inline-block white-zt" v-if="item.status==1&&isjihuo==1" @tap="Receber(item)">激活</view>
							<view class="font-24 main-bj border-r-10 line-h40 pad-l-20 pad-r-20 box-sizing d-inline-block white-zt" v-else-if="item.status==1&&isjihuo==2">赠送</view>
							<view class="black60-zt btnCoupon border-r-10 font-24 line-h40 pad-l-20 pad-r-20 black93-bj" v-else>已激活/赠送</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import swiperTabHear from "@/pagesC/pages_com/swiper-tab-hear.vue";
	import loadMore from "@/pagesC/pages_com/load-more.vue"
	export default {
		components:{
			swiperTabHear,
			loadMore
		},
		data() {
			return {
				tabIndex:0,
				swiperHeight:500,
				showLoding:false,
				tabBars: [
					{name: '全部订单', id: -1,type:'order'},
					{name: '待付款',id: 0,type:'order'}, 
					{name: '已支付',id: 1,type:'order'}, 
					{name: '待预约', id: 2,type:'fuwu'},
					{name: '服务清单', id:3,type:'fuwuOrder'},
				],
				query:{type:-1,mid:undefined,page:1,limit:10},
				count:0,
				loadText:"上拉加载更多",
				list:[],
				taoList:[],
				curId:0,
				isjihuo:1
			}
		},
		onLoad(e) {
			this.tabIndex=parseFloat(e.index)+1
			this.query.type=parseFloat(e.index)
			this.query.mid=parseInt(this.$user.state.userId)
			//获取列表的可视高度
			uni.getSystemInfo({
				success: (res) => {
					let height=res.windowHeight-uni.upx2px(200)  //获取可是窗口高度-tabbar的高度
					this.swiperHeight=height
				}
			});
			this.getOrder()
		},
		filters:{
			timeStanp(dataTime){
				if (dataTime === undefined) { return }
				  const time = dataTime
				  const unixTimestamp = new Date(time * 1000)
				  const commonTime = unixTimestamp.toLocaleString('en-GB', { hour12: false })
				  const tim = commonTime.split('/')
				  const year = tim[2].split(',')[0]
				  const month = tim[1]
				  const day = tim[0]
				  const tt = tim[2].split(',')[1]
				  if (time === '') {
				    return ''
				  } else {
				    return year + '/' + month + '/' + day + tt
				  }
			}
		},
		methods: {
			//打开弹窗
			openTan(type,Obj){
				if(type=="jihuo"){
					this.isjihuo=1
				}else if(type=="zengsong"){
					this.isjihuo=2
				}
				this.taoList=Obj.pro_list
				this.curId=Obj.list.id
				console.log(this.isjihuo)
				this.showLoding=true
			},
			//关闭弹窗
			close(){
				this.taoList=[]
				this.curId=0
				this.isjihuo==1
				this.showLoding=false
			},
			//激活套餐
			Receber(Obj){
				const one={
					id:Obj.id
				}
				uni.showModal({
					title:'提示',
					content:'套餐激活后，可以前往待预约列表选择服务预约，同时激活后不支持退款哟～',
					cancelText:"取消",
					confirmText:"确定",
					success: (res) => {
						if (res.confirm) {
							this.$api.ActivationFuOrder(one).then(res1=>{
								uni.showToast({
									icon:"success",
									title:"套餐已激活!",
									duration:2000
								})
								setTimeout(()=>{
									uni.redirectTo({
										url:'/pagesC/orderfu/package?index=3'
									})
								},1000)
							})
						}
					}
				})
			},
			//支付
			pay(Obj){
				if(Obj.paytypeid==1){
					const create_order_sign=JSON.parse(Obj.create_order_sign)
					//微信支付
					uni.requestPayment({
						provider:"wxpay",
						timeStamp:create_order_sign.timestamp,
						nonceStr:create_order_sign.noncestr,
						package:create_order_sign.package,
						signType:'MD5',
						paySign:create_order_sign.sign,
						success:(item)=>{
							if(item.errMsg=="requestPayment:ok"){
								uni.showLoading({
									title:"支付中..."
								})
								setTimeout(()=>{
									uni.hideLoading()
									this.query.page=1
									this.list=[]
									this.getOrder()
								},2000)
							}
						}
					})
				}else{
					const hhh={
						payorderid:Obj.payorderid,
						ordernum:Obj.ordernum,
						orderid:Obj.id
					}
					//余额支付
					this.$api.RechargeEdit(hhh).then(element=>{
						if(element.code==0){
							uni.showToast({
								icon:"none",
								title:"充值成功！",
								duration:2000
							})
							uni.showLoading({
								title:"支付中..."
							})
							setTimeout(()=>{
								uni.hideLoading()
								uni.navigateTo({
									url:'/pagesC/orderfu/orderfu?index=-1'
								})
							},2000)
						}
					})
				}
			},
			//进去订单详情
			openShow(Obj){
				uni.navigateTo({
					url:'/pagesC/orderfu/orderShow?id='+Obj.id
				})
			},
			//删除订单
			del(Obj){
				const one={
					id:Obj.id
				}
				uni.showModal({
					title:'提示',
					content:'您确定要删除该订单吗？',
					cancelText:"取消",
					confirmText:"确定",
					success: (res) => {
						if (res.confirm) {
							this.$api.DelFuOrder(one).then(res1=>{
								uni.showToast({
									icon:"success",
									title:"订单已删除!",
									duration:2000
								})
								this.query.page=1
								this.list=[]
								this.getOrder()
							})
						}
					}
				})
			},
			//取消订单
			cancel(Obj){
				const one={
					id:Obj.id
				}
				uni.showModal({
					title:'提示',
					content:'您确定要取消该订单吗？',
					cancelText:"取消",
					confirmText:"确定",
					success: (res) => {
						if (res.confirm) {
							this.$api.CancelFuOrder(one).then(res1=>{
								uni.showToast({
									icon:"success",
									title:"订单已取消!",
									duration:2000
								})
								this.query.page=1
								this.list=[]
								this.getOrder()
							})
						}
					}
				})
			},
			//获取订单列表
			async getOrder(){
				await this.$api.GetOrderList(this.query).then(res=>{
					
					this.list=[...this.list,...res.data]
					//计算是否还有
					let total_page=res.count/this.query.limit
					if(Number.isInteger(total_page)==true){
						total_page=total_page
					}else{
						total_page=Math.ceil(total_page)
					}
					if(this.query.page<total_page){
						this.loadText="上拉加载更多"
					}else{
						this.loadText="没有更多记录..."
					}
				})
			},
			//上拉加载事件
			async loadMore(index){
				//判断如果文字不等于“上拉加载更多”，则不进行加载
				if(this.loadText!="上拉加载更多"){return}
				//改变加载时的文字
				this.loadText="努力加载中..."
				//模拟加载数据
				this.query.page++
				this.getOrder()
			},
			//tabbar点击切换事件
			tabTap(index,type){
				if(type=='order'){
					this.tabIndex=index;
					this.query.type=index-1
					this.query.page=1
					this.list=[]
					this.getOrder()
				}else if(type=="fuwu"){
					uni.redirectTo({
						url:'/pagesC/orderfu/package?index=3'
					})
				}else{
					uni.redirectTo({
						url:'/pagesC/orderfu/inventory?index=4'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	body{
	    background-color: #f6f6f6;  
	} 
	image{
		width: 100%;
		display: block;
	}
	.shop{
		border-radius: 25rpx;
		.logo{
			width: 45rpx;
			height: 45rpx;
		}
		.left{
			width: 175rpx;
			height: 175rpx;
		}
		.right{
			width: 480rpx;
		}
	}
	.nothing{
		position: absolute;
		top: 30%;
		bottom: 0;
		left: 0;
		right: 0;
		image{
			width: 40%;
			margin: auto;
		}
	}
	.fuwu-foot{
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
		padding: 30rpx 50rpx;
		.recharge-box{
			.recharge-item{
				width: 220rpx;
				padding: 35rpx 0;
				border: 2rpx solid #e6e6e6;
				margin-right: 20rpx;
				&:last-child{
					margin-right: 0rpx;
				}
				&.active{
					background: #fdf0e1;
					border: 2rpx solid #f37c4d;
					color: #ff4730;
					.daozhang{
						color: #ff4730 !important;
					}
				}
				.deliver{
					background: linear-gradient(270deg, #f37c4d 0%, #ff4730 100%);
					border-top-left-radius: 100rpx;
					border-top-right-radius: 100rpx;
					border-bottom-right-radius: 100rpx;
					padding: 6rpx 13rpx;
					top: 0;
					right: -20rpx;
					font-size: 18rpx;
					line-height: 18rpx;
				}
			}
		}
		.bottom{
			width: 660rpx;
			bottom: 50rpx;
			.cart{
				background-color: #7f72fa;
			}
		}
	}
</style>
